<template>
  <!--这里的disabled不好使-->
  <el-popconfirm
    :width="popWidth"
    :icon-color="iconColor"
    :title="titleText"
    :disabled="false"
    @cancel="onCancel"
    @confirm="onConfirm"
  >
    <template #reference>
      <el-button v-if="btnType==1" type="danger" plain size="default" :icon="delIcon"
        >{{ btnText }}
      </el-button>
      <el-icon v-if="btnType==2" :color="$settings.info" :size="iconSize" :style="{marginLeft: marginLeft+'px'}" :icon="delIcon">
        <DeleteFilled></DeleteFilled>
      </el-icon>
    </template>
    <template #actions="{ confirm, cancel }">
      <el-button size="default" @click="cancel">{{ cancelText }}</el-button>
      <el-button type="danger" size="default" @click="confirm">
        {{ confirmText }}
      </el-button>
    </template>
  </el-popconfirm>
</template>

<script setup>
import { ref, reactive, getCurrentInstance, onMounted } from "vue";

const { proxy } = getCurrentInstance();

const props = defineProps({
  btnType: { //1为按钮，2为图标, 3=图标+按钮，4=文字
    type: Number,
    default: 1,
  },
  delData: {
    type: Object,
    default: () => {},
  },
  btnText: {
    type: String,
    default: "删除",
  },
  cancelText: {
    type: String,
    default: "取消",
  },
  confirmText: {
    type: String,
    default: "确定",
  },
  titleText: {
    type: String,
    default: "确定要删除该项吗?",
  },
  popWidth: {
    type: String,
    default: "300",
  },
  delIcon: {
    type: String,
    default: "delete",
  },
  iconColor: {
    type: String,
    default: 'var(--el-color-info)',
  },
  iconSize: {
    type: Number,
    default: 18,
  },
  marginLeft: {
    type: String,
    default: "5",
  },
  disabled: {
    type: Boolean,
    default: false,
  },
});

//关闭模态框
function onCancel() {
  console.log("关闭close");
  emit("cancel");
}

//确认删除
function onConfirm() {
  console.log("删除confirm", props.delData);
  emit("confirm", props.delData);
}

const emit = defineEmits(["cancel", "confirm"]);

defineExpose({
  close,
});

onMounted(() => {
  console.log("删除模态框mounted", props.iconColor);
});
</script>